<template>
  <div class="propertyHomePage ">
    <HeaderContent />
    <div class="propertyHomePage_content propertyHomePage_media animated fadeIn">

      <div class="propertyHomePage_content_left">
        <div>
          <div>
            <img
              class="propertyHomePage_content_tp"
              src="../../assets/images/propertyHomePage/homeTips.png"
            >
          </div>
          <div class="propertyHomePage_content_left_content">
            <div style="display:flex;width:100%">
              <div class="common_other" style="margin-right:10px">
                <div class="common_header">
                  <div class="title">功能中心</div>
                </div>
                <div
                  v-if="rightSource.length !== 0"
                  class="propertyHomePage_common_content"
                >
                  <div
                    v-for="(item, index) in rightSource"
                    :key="index"
                    :class="[
                      item.title.length > 8
                        ? 'propertyHomePage_line1'
                        : 'propertyHomePage_line2'
                    ]"
                    :style="{
                      backgroundImage: 'url(' + item.bgUrl + ')',
                      backgroundSize: '100% 100%'
                    }"
                    class="choose"
                    @click="goto(item)"
                  >
                    {{ item.title }}
                  </div>
                </div>
                <div v-else>
                  <img
                    style="width:230px;"
                    src="../../assets/images/homePage/noReport.png"
                  >
                  <div>暂无数据</div>
                </div>

              </div>
              <div class="common_other">
                <div class="common_header">
                  <div class="title">报表中心</div>
                </div>
                <div
                  v-if="reportSource.length !== 0"
                  class="propertyHomePage_common_content"
                >
                  <div
                    v-for="(item, index) in reportSource"
                    :key="index"
                    :class="[
                      item.title.length > 8
                        ? 'propertyHomePage_line1'
                        : 'propertyHomePage_line2'
                    ]"
                    :style="{
                      backgroundImage: 'url(' + item.bgUrl + ')',
                      backgroundSize: '100% 100%'
                    }"
                    class="choose"
                    @click="aaa(item)"
                  >
                    {{ item.title }}
                  </div>
                </div>
                <div v-else>
                  <img
                    style="width:230px;"
                    src="../../assets/images/homePage/noReport.png"
                  >
                  <div>暂无数据</div>
                </div>
              </div>
            </div>
            <div class="propertyHomePage_content_left_content_model">
              <div class="propertyHomePage_content_left_content_model_title">
                <div class="text">系统集成</div>
                <div style="flex:1;text-align:right">
                  <el-input
                    v-model="searchContent"
                    style="width:52%;opacity:0.8"
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    @input="search"
                  />
                </div>
              </div>
              <div class="propertyHomePage_content_left_content_model_carousel">
                <div v-if="leftSource.length !== 0">
                  <el-carousel
                    height="200px"
                    :autoplay="false"
                    :interval="0"
                    indicator-position="none"
                  >
                    <el-carousel-item
                      v-for="(item, index) in leftSource"
                      :key="index"
                    >
                      <div class="carousel_content">
                        <div
                          v-for="(item1, index1) in item.children"
                          :key="index1"
                          style="margin-right:30px;"
                          @click="aaa(item1)"
                        >
                          <!-- <img
                          style="width:80px;height:80px;"
                          :src="item1.bgUrl"
                        /> -->
                          <div
                            class="icon_svg"
                            style="display:inline-block;width:80px;height:80px;"
                            v-html="item1.bgUrl"
                          />
                          <div style="margin-top:5px;position:relative;left:-2px">
                            {{ item1.name }}
                          </div>
                        </div>
                      </div>
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <div v-else style="text-align:center">
                  <img
                    style="width:230px;"
                    src="../../assets/images/homePage/noReport.png"
                  >
                  <div>暂无数据</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="propertyHomePage_content_right">
        <div class="propertyHomePage_content_right_model propertyHomePage_content_right_model_first1">
          <div class="common_header">
            <div class="title" style="margin-bottom:5px">消息中心</div>
          </div>
          <div v-if="messageList.length!==0" class="message">
            <vue-seamless-scroll :data="messageList" class="seamless-warp" :class-option="classOption">
              <ul>
                <li v-for="(item,index) in messageList" :key="index" style="margin-bottom:10px;text-align:left;padding-left:5px">
                  <span class="spanClass" />
                  <span style="margin-left:5px">{{ item.time }}</span>
                  <span class="spanTitle">{{ item.title }}</span>
                </li>
              </ul>
            </vue-seamless-scroll>
            <!-- <div v-for="(item,index) in messageList" :key="index" style="margin-bottom:10px">
              <div style="text-align:left">
                <span class="spanClass" />
                <span style="margin-left:5px">{{ item.time }}</span>
                <span class="spanTitle">{{ item.title }}</span>
              </div>
            </div> -->
          </div>
          <div v-else>
            <img
              style="width:200px"
              src="../../assets/images/homePage/noReport.png"
            >
            <div>暂无数据</div>
          </div>
        </div>
        <div class="propertyHomePage_content_right_model propertyHomePage_content_right_model_first">
          <div class="common_header">
            <div class="title">项目中心</div>
          </div>
          <div
            v-if="rightSource.length !== 0"
            class="propertyHomePage_common_content"
          >
            <div
              v-for="(item, index) in xmkSource"
              :key="index"
              :class="[
                item.title.length > 8
                  ? 'propertyHomePage_line1'
                  : 'propertyHomePage_line2'
              ]"
              :style="{
                backgroundImage: 'url(' + item.bgUrl + ')',
                backgroundSize: '100% 100%'
              }"
              class="choose"
              @click="aaa(item)"
            >
              {{ item.title }}
            </div>
          </div>
          <div v-else>
            <img
              style="width:230px;"
              src="../../assets/images/homePage/noReport.png"
            >
            <div>暂无数据</div>
          </div>
        </div>
        <div style="margin-bottom:0px" class="propertyHomePage_content_right_model propertyHomePage_content_right_model_second">
          <div class="common_header">
            <div class="title">业务中心</div>
          </div>
          <div v-if="rightSource1.length !== 0">
            <div class="propertyHomePage_common_content">
              <div
                v-for="(item, index) in rightSource1"
                :key="index"
                :style="{
                  backgroundImage: 'url(' + item.bgUrl + ')',
                  backgroundSize: '100% 100%'
                }"
                class="bussinessChoose"
                @click="goto(item)"
              >
                <span> {{ item.name }} </span>
                <span> | {{ item.total }} </span>
              </div>
            </div>
          </div>
          <div v-else>
            <img
              style="width:200px"
              src="../../assets/images/homePage/noReport.png"
            >
            <div>暂无数据</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderContent from '@/layout/components/HeaderContent/index.vue';
import { getMenuList } from '@/api/login';
import { getToken } from '@/utils/auth.js';
import { getKeyByMenuId, previewicon } from '@/api/propertyHomePage/index';
import { getCount } from '@/api/table';
import vueSeamlessScroll from 'vue-seamless-scroll';
// import { setToken } from '@/utils/auth.js';
export default {
  // 注册
  components: {
    HeaderContent,
    vueSeamlessScroll
  },
  data() {
    return {
      messageList: [
        {
          time: '2021-01-19 13:23:12',
          title: '梁思卓发起用款计划申请单'
        },
        {
          time: '2021-05-20 15:24:12',
          title: '李晓伟发起用储备立项'
        },
        {
          time: '2021-05-15 17:22:12',
          title: '倪永亮发起用款计划申请单'
        },
        {
          time: '2021-05-13 18:10:14',
          title: '孙一浩发起用款计划申请单'
        },
        {
          time: '2021-05-09 14:20:23',
          title: '陈杰发起用款计划申请单'
        },
        {
          time: '2021-05-12 11:43:15',
          title: '梁思卓发起用款计划申请单'
        }
      ],
      searchContent: '',
      leftSource: [
        {
          name: '第一页',
          children: []
        },
        {
          name: '第二页',
          children: []
        }
      ],
      rightSource: [],
      rightSource1: [],
      reportSource: [],
      xmkSource: [],
      key: '',
      feature: [],
      flag: true,
      timer: null
    };
  },
  computed: {

    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2500 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },

  created() {
    getMenuList({
      roleId: getToken('xcRoleId'),
      state: 4,
      url: '',
      appId: getToken('sysitemId'),
      isMeta: true
    }).then(res => {
      if (res.success) {
        res.data.forEach(async item => {
          if (item.title === '全部功能') {
            this.feature = item.children;
            for (let i = 0; i < item.children.length; i++) {
              if (i <= 12) {
                const url = await previewicon({
                  fileId: item.children[i].icon
                });
                this.leftSource[0].children.push({
                  name: item.children[i].title,
                  path: item.children[i].path,
                  id: item.children[i].id,
                  isHideLeft: item.children[i].isHideLeft,
                  isHideTop: item.children[i].isHideTop,
                  isTargetNew: item.children[i].isTargetNew + '',
                  bgUrl: url
                    .replace(
                      /width="+(\w+)+" height="+(\w+)+"/,
                      'width="84px" height="84px"'
                    )
                    .replace(/linearGradient-1/g, item.children[i].icon)
                });
              }
            }
          }
          if (item.title === '报表中心') {
            console.log('4343434');
            item.children.map(o => {
              o.bgUrl = require('@/assets/images/homePage/monthReport.png');
            });
            this.reportSource = item.children;
          }
          if (item.title === '项目库') {
            item.children.map(o => {
              o.bgUrl = require('@/assets/images/homePage/summaryReport.png');
            });
            this.xmkSource = item.children;
          }
        });
        const filter = res.data.filter(item => {
          return item.title === '功能中心';
        });
        if (filter.length !== 0) {
          filter[0].children.map(o => {
            o.bgUrl = require('@/assets/images/homePage/reportCenter.png');
          });
          this.rightSource = filter[0].children;
        }
      } else {
        this.rightSource = [];
        this.leftSource = [];
      }
    });

    setTimeout(() => {
      this.getCount();
    }, 500);
  },
  methods: {
    aaa(a) {
      if (a.thirdWebsite !== '' && a.thirdWebsite) {
        const src = a.thirdWebsite;
        window.open(src);
      } else {
        if (!a.meta) {
          a.meta = {};
          a.meta.title = a.name;
        }
        const params = {
          path: a.path,
          query: {
            title: a.meta.title,
            menuId: a.id,
            flag: 0,
            // isShow: isShow,
            sId: 'TabsTable',
            isHideLeft: a.isHideLeft,
            isHideTop: a.isHideTop
          }
        };
        // 不打开新页面
        if (a.isTargetNew + '' === '0') {
          this.$router.push(params);
        } else {
          const routeUrl = this.$router.resolve(params);
          const tempwindow = window.open('_blank'); // 先打开页面
          tempwindow.location = routeUrl.href; // 后更改页面地址
        }
      }
    },
    // 获取申请数、待办数
    getCount() {
      getCount({ userId: getToken('xcUserId') }).then(res => {
        if (res.success) {
          res.data.map((item, index) => {
            item.sign = 'bussiness';
            item.bussinessType = index + '';
            item.bgUrl = require('@/assets/images/homePage/monthReport.png');
            item.isHideLeft = '1';
            item.isHideTop = '1';
          });
          this.rightSource1 = res.data;
        } else {
          this.rightSource1 = [];
        }
      });
    },
    goto(item) {
      if (item.sign) {
        this.$router.push({
          path: '/bussinessPage',
          query: {
            type: item.bussinessType,
            sId: 'TabsTable',
            isHideLeft: item.isHideLeft,
            isHideTop: item.isHideTop
          }
        });
      } else {
        if (item.type === 0) {
          // 调用接口，获取额外的参数
          getKeyByMenuId({
            menuId: item.id
          }).then(res => {
            if (res.success) {
              const params = {
                path: item.path,
                query: {
                  name: item.name,
                  title: item.meta.title,
                  sId: res.data.sId.split('-')[0],
                  key: res.data.key,
                  defId: res.data.id,
                  bizKey: '',
                  flag: 0,
                  fileType: res.data.fileType,
                  menuId: item.id,
                  formGuid: '',
                  taskId: '',
                  isHideLeft: item.isHideLeft,
                  isHideTop: item.isHideTop
                // isShow: true
                }

              };
              if (item.isTargetNew + '' === '0') {
                this.$router.push(params);
              } else {
                const routeUrl = this.$router.resolve(params);
                const tempwindow = window.open('_blank'); // 先打开页面
                tempwindow.location = routeUrl.href; // 后更改页面地址
              }
            } else {
              this.$message({
                message: '该菜单存在问题，请联系运维人员',
                type: 'warning'
              });
            }
          });
        } else {
          this.aaa(item);
        }
      }
    },
    // 搜索
    async search() {
      const reg = RegExp(this.searchContent, 'g');
      this.leftSource[0].children = [];
      this.flag = true;
      for (let i = 0; i < this.feature.length; i++) {
        if (reg.test(this.feature[i].title)) {
          this.flag = false;
          const url = await previewicon({
            fileId: this.feature[i].icon
          });
          this.leftSource[0].children.push({
            name: this.feature[i].title,
            bgUrl: url
              .replace(
                /width="+(\w+)+" height="+(\w+)+"/,
                'width="84px" height="84px"'
              )
              .replace(/linearGradient-1/g, this.feature[i].icon)
          });
        }
      }
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          if (this.flag) {
            this.$message({
              message: '暂无此功能',
              type: 'warning'
            });
          }
        }, 500);
      } else {
        this.timer = setTimeout(() => {
          if (this.flag) {
            this.$message({
              message: '暂无此功能',
              type: 'warning'
            });
          }
        }, 500);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.spanTitle{
  font-size: 14px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 500;
text-align: left;
color: #1890FF;
line-height: 20px;
margin-left:5px;
}
.message{
  opacity: 1;
  background: #EDF4FF;
  border-radius: 8px;
  height: 190px;
  overflow-y:auto;
  padding: 5px 10px;
}
.spanClass{
width: 6px;
height: 6px;
opacity: 1;
background: #ff8e8e;
border-radius: 50%;
display: inline-block
}
.propertyHomePage_content_left_content_model_carousel
  /deep/
  .el-carousel__arrow {
  top: 40% !important;
  background-color: rgba(31, 45, 61, 0.45) !important;
  font-size: 20px !important;
}

.carousel_content {
  margin-top: 40px;
  text-align: center;
  display: flex;
  width: 80%;
  margin-left: 10%;
  overflow-x: auto;
}
.carousel_content:hover {
  cursor: pointer;
}
 @media screen and (min-width: 1600px) {
    .propertyHomePage_media {
          height: calc(100vh - 72px);
    }
}

.propertyHomePage_content {
  text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.3);
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
    0 0.3em 1em rgba(0, 0, 0, 0.12);
  background: url("../../assets/images/propertyHomePage/bg.png");
  display: flex;
  background-size: 100% 100%;

  .propertyHomePage_content_left {
    flex: 3;
    padding: 0px 10px;
    .propertyHomePage_content_tp {
      width: 100%;
      height: 250px;
    }
    .common_other {
      text-align: center;
      flex: 1;
      border-radius: 8px;
      padding: 5px 10px;
      border-radius: 8px;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
      color: #000;
      overflow: hidden;
      position: relative;
      background: rgba(204, 230, 255, 0.5);
      overflow: hidden;
      z-index: 2;
      // height: calc(100vh - 600px);
    }
    .propertyHomePage_content_left_content {
      display: flex;
      flex-flow: wrap;
      padding: 10px;
      // 毛玻璃
      .propertyHomePage_content_left_content_model::before,
      .common_other::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        -webkit-filter: blur(15px);
        -moz-filter: blur(15px);
        -ms-filter: blur(15px);
        -o-filter: blur(15px);
        filter: blur(15px);
        z-index: -3;
        background-image: url("../../assets/images/propertyHomePage/bg.png");
        background-position: center top;
        background-size: cover;
        background-attachment: fixed;
      }
      .propertyHomePage_content_left_content_model {
        width: 100%;
        height: 250px;
        margin-top: 25px;
        border-radius: 8px;
        padding: 5px 10px;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
        color: #000;
        overflow: hidden;
        position: relative;
        background: rgba(204, 230, 255, 0.5);
        overflow: hidden;
        z-index: 2;
      }
    }
    .propertyHomePage_content_left_content_model_title {
      display: flex;
      padding: 10px;
      .text {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        color: rgba(0, 0, 0, 0.65);
        flex: 1;
      }
    }
  }
  .propertyHomePage_content_right_model_first {
    height: 250px;
    overflow-y:auto;
  }
  .propertyHomePage_content_right_model_first1{
    height: 246px;
    padding: 11px;
  }
  .propertyHomePage_content_right_model_second {
        height: 220px;
  }
  .propertyHomePage_content_right {
    flex: 1.5;
    padding: 10px;
    padding-top: 15px;
    // 毛玻璃
    .propertyHomePage_content_right_model::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      -webkit-filter: blur(15px);
      -moz-filter: blur(15px);
      -ms-filter: blur(15px);
      -o-filter: blur(15px);
      filter: blur(15px);
      z-index: -3;
      background-image: url("../../assets/images/propertyHomePage/bg.png");
      background-position: center top;
      background-size: cover;
      background-attachment: fixed;
    }
    .propertyHomePage_content_right_model {
      border-radius: 8px;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
      margin-bottom: 20px;
      padding: 5px 5px;
      text-align: center;
      color: #000;
      position: relative;
      background: rgba(204, 230, 255, 0.5);
      z-index: 2;
    }
  }
  .common_header {
    display: flex;
    padding: 0px 10px;
    .title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: rgba(0, 0, 0, 0.65);
      line-height: 33px;
      flex: 1;
      margin-bottom: 15px;
    }
  }
}
.propertyHomePage_common_content {
  display: flex;
  flex-flow: wrap;
  margin-top: 10px;
  padding-left: 18px;
  overflow: auto;
  overflow-y: auto;
  height:170px;
  // height: calc(100vh - 675px);
  // height: calc(100% - 50px);
  .bussinessChoose {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 5px;
    height: 50px;
    line-height: 40px;
    margin-right: 15px;
    width: 28%;
    opacity: 1;
    color: #fff;
    border-radius: 9px;
    margin-bottom: 15px;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
  }
  .bussinessChoose:hover {
    cursor: pointer;
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.15);
    opacity: 0.9;
    // text-decoration: underline
  }
  .choose {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 5px;
    height: 56px;
    margin-right: 15px;
    width: 28%;
    opacity: 1;
    color: #fff;
    border-radius: 9px;
    margin-bottom: 15px;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
  }
  .choose:hover {
    cursor: pointer;
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.15);
    opacity: 0.9;
    // text-decoration: underline
  }
}
.propertyHomePage_line1 {
  line-height: 25px;
}
.propertyHomePage_line2 {
  line-height: 48px;
}
</style>
